<template>
  <el-popover v-model="popoverVisible" placement="top" width="160" trigger="manual">
    <p v-if="$slots.default">
      <slot />
    </p>
    <div style="text-align: right; margin: 0">
      <el-button size="mini" type="text" @click="popoverVisible = false">取消</el-button>
      <el-button type="primary" size="mini" @click="handleClick">确定</el-button>
    </div>
    <el-button slot="reference" :type="buttonType" :size="buttonSize" @click="popoverVisible = true">{{ text }}</el-button>
  </el-popover>
</template>

<script>
export default {
  name: 'PopoverConfirm',
  props: {
    index: {
      type: String,
      default: ''
    },
    buttonType: {
      type: String,
      default: 'danger'
    },
    buttonSize: {
      type: String,
      default: 'mini'
    },
    text: {
      type: String,
      default: '删除'
    }

  },
  data() {
    return {
      popoverVisible: false
    }
  },
  methods: {
    handleClick(evt) {
      this.$emit('click', evt)
      this.popoverVisible = false
    }
  }
}
</script>
